/* 
  学习目标：使用useEffect修改网页的标题
  作用：react 专门提供了 useEffect Hook 来处理函数组件中的副作用
  步骤：
    1. useState 声明 count
    2. 点击按钮，修改count
    3. 使用 useEffect 实时修改title
  作用：useEffect Hook看做 `componentDidMount`，`componentDidUpdate` 和`componentWillUnmount` 这三个函数的组合。
*/

// 1. 导入 useState钩子函数： 声明状态
import React, { useEffect, useState } from 'react';

export default function App() {
  // 返回值是一个数组--[状态变量，更新状态的函数]
  const [count, setCount] = useState(100);
  // 导入useEffect钩子函数: 会自动执行
  // 语法：useEffect(回调函数)；回调函数中可以获取到更新后的值
  useEffect(() => {
    document.title = count;
  });
  return (
    <div>
      <h3>count：{count}</h3>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我修改count和标题
      </button>
    </div>
  );
}
